<template>
  <div>
    <div class="warp">
      <Header :title_="title_"></Header>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in photo" :key="item">
          <img :src="item" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="title">
        <p>{{ equitems.name }}</p>
        <p>￥{{ equitems.officialPrice }}</p>
      </div>
      <div class="introduce">{{ equitems.childCategory }}</div>
      <div class="color_"></div>

      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :title="title"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
      <!-- 评分 -->
      <div class="use_">
            <p>用户评分</p>
            <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" readonly :count="6"/>
      </div>
      
      <!-- 大图查看 -->
      <div class="bigim">
        <van-divider content-position="left" :style="{ color: '#999', borderColor: '#999'}">点击图片查看大图</van-divider>
        <viewer :images="photo" class="img_">
          <img v-for="(src,index) in photo" :src="src" :key="index" />
        </viewer>
      </div>

      <!-- 加入购物车 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickkf" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickdp" />
        <van-goods-action-button type="danger" text="加入购物车" @click="onClickButton" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/Header";
import { Toast, Divider } from "vant";
const coupon1 = {
  available: 1,
  condition: "满500可领取",
  reason: "限领一次",
  value: 50*100,
  name: "限时领取",
  startAt: 1600804000,
  endAt: 1601100000,
  valueDesc: "50",
  unitDesc: "元",
};
const coupon2 = {
  available: 1,
  condition: "满800可领取",
  reason: "限领一次",
  value: 100*100,
  name: "限时领取",
  startAt: 1600804000,
  endAt: 1601100000,
  valueDesc: "100",
  unitDesc: "元",
};
const coupon3 = {
  available: 1,
  condition: "满1000可领取",
  reason: "限领一次",
  value: 200*100,
  name: "限时领取",
  startAt: 1600804000,
  endAt: 1601100000,
  valueDesc: "200",
  unitDesc: "元",
};
const coupon4 = {
  available: 1,
  condition: "满2000可领取",
  reason: "暂不可用",
  value: 500*100,
  name: "限时领取",
  startAt: 1600804000,
  endAt: 1601100000,
  valueDesc: "500",
  unitDesc: "元",
};
export default {
  data() {
    return {
      value: 3.5,
      title_: "商品详情",
      equitems: [],
      index: "0",
      photo: [],
      chosenCoupon: -1,
      coupons: [coupon1,coupon2,coupon3],
      disabledCoupons: [coupon4],
      title: "领取优惠劵",
      showList: false,
    };
  },
  components: {
    Header,
  },
  methods: {
    onClickkf(){
        Toast("客服正在赶来的路上");
    },
    onClickdp(){
        Toast('店铺倒闭了');
    },
    onClickIcon() {
        this.$router.push({ name: "cartlist"});
    },
    onClickButton() {
      //加入购物车     
        this.$store.dispatch('items',this.equitems)   
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  },
  mounted() {
    let url = "http://localhost:8080/data/Bshose.json";
    this.$axios.get(url).then((ret) => {
      // console.log(ret.data[this.index]);
      this.equitems = ret.data[this.index];
      this.photo = ret.data[this.index].tags
      // console.log(this.equitems);
      // console.log(this.photo);
      
    });
    //接受传过来的index
    let a = this.$route.params.index;
    this.index = a;
    // console.log(this.index);
  },
  created() {
    this.$bus.$emit("yincang", false);
  },
  beforeDestroy() {
    this.$bus.$emit("yincang", true);
  },
};
</script>

<style lang="scss" scoped>
.warp {
  .my-swipe .van-swipe-item {
    text-align: center;
    img {
        width: 200px;
      height: 200px;
    }
  }
  .van-swipe__indicator {
    color: #000 !important;
  }
  .title {
    padding: 10px;
    width: 100%;
    display: flex;
    p:nth-of-type(1) {
      font-size: 19px;
      line-height: 18px;
      margin-right: 10px;
    }
    p:nth-of-type(2) {
      font-size: 15px;
      color: #ff0036;
    }
  }
  .introduce {
    padding: 10px;
    // font-weight: 800px;
    font-size: 16px;
  }
  .color_ {
    height: 15px;
    width: 100%;
    background: #f0f3f5;
  }
  .bigim{
      margin-top:30px;
     .img_ {
    height: 50px !important;
    display: flex;
    justify-content: space-around;
    padding: 0 15px;
    img {
      height: 100% !important;
    }
    } 
  }
  
  .use_{
      display: flex;
        padding: 0 15px;
        margin-top:10px;

      p{
          font-size:14px;
          margin-right:25px;
      }
  }
  .van-coupon-cell{
      span{
          color:orangered;
          font-size:15px;
      }
  }
}
</style>